<template>
  <el-dialog
    :visible.sync="visible"
    title="详情"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    top="3%"
    @close="close()"
    :destroy-on-close="true"
    width="70%"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first"></el-tab-pane>
      <el-tab-pane label="购票须知" name="second"></el-tab-pane>
      <el-tab-pane label="景区介绍" name="third"></el-tab-pane>
    </el-tabs>
    <el-form
      style="height: 600px; overflow: auto; padding: 0 40px 0 20px"
      :model="dataForm"
      ref="dataForm"
      :label-width="$i18n.locale === 'en-US' ? '150px' : '150px'"
    >
      <template v-if="activeName == 'first'">
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属区域" prop="scncId">
              {{ dataForm.scenicName || "--" }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="景区名称" prop="ismapId">
              {{ dataForm.ismapId | delIsmapId }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起步价格" prop="startPrice">
              {{ dataForm.startPrice || "--" }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开放时间" prop="openDate">
              <p>{{ dataForm.openDate || "--" }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否热门" prop="isHot">
              {{ dataForm.isHot == 1 ? "是" : "否" }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="特色标签" prop="scenic_labels">
              {{ dataForm.scenic_labelsArr | delScenicLabel }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="特色描述" prop="remark">
              {{ dataForm.remark || "--" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="景区地址" prop="address">
              {{ dataForm.address || "--" }}
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="内容:">
              <p
                class="txt content"
                v-html="dataForm.ticketNotice"
                style="margin-top: 8px"
              ></p>
            </el-form-item>
           <el-form-item label="购票须知" prop="ticketNotice">
              {{ dataForm.ticketNotice }}。
              <span style="color:#f44">（注意事项:{{ dataForm.note }}）</span>
            </el-form-item> 
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="封面(最多1张)" prop="">
              <img
                v-if="dataForm.coverImage"
                :src="dataForm.coverImage"
                class="avatar"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="详情轮播图" prop="">
              <el-image
                v-for="(item, index) in fileList2"
                :key="index"
                style="
                  width: 140px;
                  height: 140px;
                  margin-right: 10px;
                  border-radius: 5px;
                "
                :src="item"
                :preview-src-list="fileList2"
              >
              </el-image>
            </el-form-item>
          </el-col>
        </el-row>
        <div
          style="
            display: flex;
            justify-content: space-between;
            padding-left: 30px;
          "
        >
          <div class="table">
            <h3>运营时间</h3>
            <el-table :data="times">
              <el-table-column prop="month" label="月份"> </el-table-column>
              <el-table-column prop="operateDate" label="运营时间">
              </el-table-column>
              <el-table-column prop="intoDate" label="入园时间">
              </el-table-column>
            </el-table>
          </div>
          <div class="table" v-if="dataForm.startPrice > 0">
            <h3>优待政策</h3>
            <el-table :data="preferentialPolicies">
              <el-table-column prop="human" label="人群"> </el-table-column>
              <el-table-column prop="preferential" label="优待政策">
              </el-table-column>
              <el-table-column
                prop="condition"
                label="适用条件"
                min-width="180"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </template>
      <template v-if="activeName == 'second'">
        <quill-editor
          class="ql-container"
          ref="myQuillEditor"
          v-model="dataForm.ticketNotice"
        />
      </template>
      <template v-if="activeName == 'third'">
        <quill-editor
          class="ql-container"
          ref="myQuillEditor"
          v-model="dataForm.infoIntroduce"
        />
      </template>
    </el-form>
  </el-dialog>
</template>

<script>
var that;
import Cookies from "js-cookie";
import debounce from "lodash/debounce";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
export default {
  data() {
    return {
      fileList: [],
      Scenicspotdata: [],
      times: [], //运营时间
      preferentialPolicies: [], //优惠政策
      fileList2: [], //轮播图
      visible: false,
      activeName: "first",
      dataForm: {
        id: "",
        ismapId: "", //景区名称对应的id
        scenicId: "", //所属区域丢对应的id
        startPrice: null,
        coverImage: "",
        openDate: "",
        address: "",
        ticketNotice: "",
        note: "",
        isScenicTicketPicDTOList: [],
        operateDate: "",
        preferentialPolicies: "",
        noticeRemark: "",
        infoIntroduce: "",
        isHot: "",
        ismapId: "",
        scenic_labels: "",
        scenic_labelsArr: [],
      },
    };
  },
  created() {
    that = this;
    this.getjqdata();
  },
  components: {
    quillEditor,
  },
  filters: {
    delScenicLabel(val) {
      let str = "";
      if (val && val.length != 0) {
        for (let i = 0; i < val.length; i++) {
          str += that.$getDictLabel("scenic_labels", val[i]) + "，";
        }
        return str;
      }
    },
    delIsmapId(val) {
      let d = that.Scenicspotdata.filter((item) => item.id == val);
      if (d.length != 0) {
        return d[0].name;
      } else {
        return "--";
      }
    },
  },
  methods: {
    close() {
      this.dataForm = {
        isScenicTicketPicDTOList: [],
        ismapId: "",
        scenicId: "",
        startPrice: null,
        coverImage: "",
        openDate: "",
        address: "",
        ticketNotice: "",
        note: "",
        operateDate: "",
        preferentialPolicies: "",
        noticeRemark: "",
        infoIntroduce: "",
        isHot: "",
        ismapId: "",
        spid: "",
      };
    },
    init() {
      this.visible = true;
      if (this.dataForm.id) {
        this.dataForm.spid = this.dataForm.id;
      }
      this.$nextTick(() => {
        this.fileList2 = [];
        //this.$refs["dataForm"].resetFields();
        if (this.dataForm.spid) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get("/scenic/isscenicspot/" + this.dataForm.spid)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          this.dataForm.scenic_labelsArr =
            this.dataForm.scenicLabels.split(",");
          this.times = JSON.parse(this.dataForm.operateDate);
          this.preferentialPolicies = JSON.parse(
            this.dataForm.preferentialPolicies
          );
          if (this.dataForm.isScenicTicketPicDTOList) {
            this.dataForm.isScenicTicketPicDTOList.filter((item) => {
              this.fileList2.push(item.scenicPic);
            });
          } else {
            this.dataForm.isScenicTicketPicDTOList = [];
          }
        })
        .catch(() => {});
    },
    getjqdata() {
      this.$http
        .get("/sys/ismap/pageNoPro", {
          params: {
            type: 1,
            page: 1,
            limit: -1,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.Scenicspotdata = res.data.data.list;
            console.log(this.Scenicspotdata);
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
/deep/.el-dialog__body{padding: 10px 20px;}
/deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 336px;
}
p{margin: 0;padding: 0;line-height: 20px;}
.aui-content .ql-container {
  height: auto;
}

/deep/.ql-container.ql-snow {
  height: 520px !important;
}

.avatar {
  width: 140px;
  height: 140px;
  display: block;
}

.table {
  width: 48%;
  margin: 0 1%;
  flex: 1;
}
.txt {
  line-height: 40px;
  height: auto;
  margin: 0;
  padding: 0;

  &.content {
    ::v-deep p {
      padding: 0;
      line-height: 24px;
      margin: 0 !important;
    }
    ::v-deep img {
      width: 100%;
    }

    img {
      width: 100%;
    }
  }
}
</style>
